<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>个人信息</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="own-box">
            <el-card shadow="hover">
            <div v-if="user.role == '1'">
                <el-form :model="student" class="user-search"  label-width="80px">
                <!-- <el-form-item label="名字：">
                    <el-input size="small" v-model="student.name" auto-complete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="密码">
                    <el-input size="small" v-model="student.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="save">保存</el-button>
                </el-form-item>
                </el-form>
            </div>
            <div v-else-if="user.role == '10'">
                <el-form :model="teacher" class="user-search"  label-width="80px">
                <!-- <el-form-item label="名字：">
                    <el-input size="small" v-model="teacher.name" auto-complete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="密码">
                    <el-input size="small" v-model="teacher.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="save">保存</el-button>
                </el-form-item>
                </el-form>
            </div>
            <div v-else>
                <el-form :model="manager" class="user-search"  label-width="80px">
                    <el-form-item label="账号">
                        <el-input size="small" v-model="manager.account" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="名字：">
                        <el-input size="small" v-model="manager.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input size="small" v-model="manager.password" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="primary" icon="el-icon-search" @click="save">保存</el-button>
                    </el-form-item>
                    </el-form>
            </div>
        </el-card>
        </div>
        
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data () {
        return {
            student: {
                id: '',
                name: '',
                password: ''
            },
            teacher: {
                id: '',
                name: '',
                password: ''
            },
            manager: {
                id: '',
                account: '',
                name: '',
                password: ''
            }
        }
    },
    computed: {
        ...mapState(['user'])
    },
    created () {
        if (this.user.role == '1') {
            this.student.id = this.user.id
            this.student.name = this.user.name
            this.student.password = this.user.password
        } else if (this.user.role == '10') {
            this.teacher.id = this.user.id
            this.teacher.name = this.user.name
            this.teacher.password = this.user.password
        } else {
            this.manager.id = this.user.id
            this.manager.name = this.user.name
            this.manager.password = this.user.password
            this.manager.account = this.user.account
        }
    },
    methods: {
        /**
         * 保存账号信息
         */
        save () {
            if (this.user.role == '1') {
                this.$api.auth.studentUpdate(this.student).then(res => {
                    if (res.code === 200) {
                        let params = {
                            ...this.user,
                            ...this.student
                        }
                        this.$store.commit('login', params)
                        this.$message.success('修改成功！')
                    }
                })
            } else if (this.user.role == '10') {
                this.$api.auth.teacherUpdate(this.teacher).then(res => {
                    if (res.code === 200) {
                        let params = {
                            ...this.user,
                            ...this.teacher
                        }
                        this.$store.commit('login', params)
                        this.$message.success('修改成功！')
                    }
                })
            } else {
                this.$api.auth.managerUpdate(this.manager).then(res => {
                    if (res.code === 200) {
                        let params = {
                            ...this.user,
                            ...this.manager
                        }
                        this.$store.commit('login', params)
                        this.$message.success('修改成功！')
                    }
                })
            }
        }
    }
}
</script>
<style scoped>
.user-search {
  margin-top: 20px;
}
.own-box{
    width: 40%;
    margin: 30px auto 0;
    transform: translateX(-10%);
}
</style>